<template>
  <view class="form-wrap">

    <!-- {{ formData }} -->
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">

      <div v-for="(item, index) in inputlist" :key="index" :style="[boxstyle(item, index)]">
        <!-- {{ item }} -->
        <formselect v-if="item.type == 'select'" :item="item" :data="formData" v-model="formData[item.value]">
        </formselect>
        <customers v-else-if="item.type == 'customers'" :item="item" :data="formData" :customId.sync="formData.customId"
          :customContactsId.sync="formData.customContactsId">
        </customers>
        <order-ids v-else-if="item.type == 'orderIds'" :item="item" :data="formData" v-model="formData[item.value]">
        </order-ids>
        <pickerz v-else-if="item.type == 'picker'" :item="item" :data="formData" v-model="formData[item.value]">
        </pickerz>
        <forminput v-else :item="item" :data="formData" v-model="formData[item.value]"></forminput>
      </div>
    </u--form>
  </view>
</template>

<script>
import forminput from "./components/forminput.vue";
import formselect from "./components/formselect.vue";
import pickerz from "./components/picker.vue";
import customers from "./components/customers.vue";
import qs from "qs";
import orderIds from "./components/orderIds.vue"
// console.log(pickerz, "picker");
export default {
  name: "formz",
  components: {
    orderIds,
    customers,
    forminput,
    formselect,
    pickerz
  },
  props: {
    data: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    inputs: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    setdefaultValuefalg: {
      typeof: Boolean,
      default: false,
    },
  },
  asyncComputed: {
    async inputlistasync() {
      let formData = uni.$u.deepClone(this.formData);
      let propsdata = uni.$u.deepClone(this.data);
      let propsinputs = uni.$u.deepClone(this.inputs);
      if (!this.inputFlag) {
        return [];
      }
      let r = [];
      for (let key in propsinputs) {
        let e = propsinputs[key];
        if (typeof e == "function") {
          r = r.concat(
            await e.call(this, {
              propsdata,
              formData,
            })
          );
        } else {
          r.push(e);
        }
      }

      return r;
    },
  },
  computed: {
    inputlist() {
      if (!this.inputlistasync) {
        return [];
      }
      return this.inputlistasync.filter((e) => {
        return this.$z.inputif(e, this.formData);
      });
    },
    rules() {
      let r = {};
      if (!this.inputlist) {
        return {};
      }
      this.inputlist.forEach((e) => {
        let rules = e.rules || e.rule || false;
        if (rules) {
          r[e.value] = rules.map((e) => {
            return {
              ...e,
              trigger: "blur",
            };
          });
        } else if (e.required) {
          r[e.value] = [{
            required: true,
            message: "请输入" + e.label,
            trigger: "blur"
          },];
        } else if (e.type == "yzm") {
          r[e.value] = [{
            required: true,
            message: "请输入" + e.label,
            trigger: "blur"
          },];
        }
      });

      return r;
    },
  },
  watch: {
    inputlist: {
      handler(n, o) {
        if (!n) {
          return;
        }
        o = o || [];

        const isEqual = (obj1, obj2) =>
          qs.stringify(obj1) === qs.stringify(obj2);
        let edtinputso = new Set([
          ...o.filter((e) => !n.some((f) => isEqual(e, f))),
        ]);

        let edtinputs = new Set([
          ...n.filter((e) => !o.some((f) => isEqual(e, f))),
        ]);

        if (
          !this.setdefaultValuefalg &&
          Object.keys(this.data).length != 0 &&
          qs.stringify(this.formData) == qs.stringify(this.data)
        ) {
          return;
        }

        if (
          !(
            Object.keys(this.data).length != 0 &&
            qs.stringify(this.formData) == qs.stringify(this.data)
          )
        ) {
          edtinputso.forEach((e) => {
            delete this.formData[e.prop];
          });
        }

        if (
          Object.keys(this.data).length != 0 &&
          qs.stringify(this.formData) == qs.stringify(this.data)
        ) {

          edtinputs.forEach((e) => {
            if (!e.value) {
              return;
            }
            if (!Object.keys(this.formData).includes(e.value)) {
              // state.formData[e.value] = "";

              this.$set(this.formData, e.value, "");
            }
            if (this.formData[e.value] || this.formData[e.value] == "0") {

            } else if (e.defaultValue) {
              this.$set(this.formData, e.value, e.defaultValue);
              // this.formData[e.value] = e.defaultValue;
            }
          });
        } else {

          edtinputs.forEach((e) => {
            if (!e.value) {
              return;
            }

            if (!Object.keys(this.formData).includes(e.value)) {
              // this.formData[e.value] = "";
              this.$set(this.formData, e.value, "");
            }
            if (
              e.defaultValue ||
              e.defaultValue == "0" ||
              e.defaultValue == ""
            ) {
              this.$set(this.formData, e.value, e.defaultValue);
              // this.formData[e.value] = e.defaultValue;
            }
          });
        }
      },
      deep: true,
    },
    data: {
      handler(n, o) {
        this.formData = this.$u.deepClone(this.data)
      },
      immediate: true,
    },
    rules: {
      handler() {
        if (this.$refs.uForm) {
          this.$refs.uForm.setRules(this.rules);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      inputFlag: true,
      formData: {},
    };
  },
  methods: {
    boxstyle(item, index) {
      let r = {};
      if (item.iscard == "before") {
        r.borderTopLeftRadius = "10rpx";
        r.borderTopRightRadius = "10rpx";
        r.background = "#fff";
        // r.margin = "20rpx 20rpx 0 20rpx";
        r.padding = "0 32rpx";
      }
      if (item.iscard == "after") {
        r.borderBottomLeftRadius = "10rpx";
        r.borderBottomRightRadius = "10rpx";
        r.background = "#fff";
        // r.margin = "0rpx 20rpx 20rpx 20rpx";
        r.padding = "0 32rpx";
      }
      if (item.iscard == "card") {
        r.borderRadius = "10rpx";
        r.background = "#fff";
        // r.margin = "20rpx";
        r.padding = "0 32rpx";
      }
      let itembeforelist = this.inputlist.slice(0, index);
      itembeforelist = itembeforelist.reverse();
      let isbeforeiscard = itembeforelist.find((e) => {
        return e.iscard == "before" || e.iscard == "after";
      });
      if (isbeforeiscard && isbeforeiscard.iscard == "before") {
        r.background = "#fff";
        // r.margin = "0 20rpx";
        r.padding = "0 32rpx";
      }
      return r;
    },
    async validate(e) {
      await this.$refs.uForm.validate();
      return this.formData;
    },
  },
  mounted() {
    // setTimeout(() => {
    //   // this.formData.type = "1";
    //   console.log(123456);
    // }, 1000);
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    // this.$refs.uForm.setRules(this.rules);
  },
};
</script>
<style scoped lang="scss">
	page {
	  background: #f2f4f5;
	}
	
</style>